<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <base th:href="${url}">
    <title>用户注册</title>
    <link href="jquery/css/settings/user/enroll.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

    <script>
        $(function () {

            $("#btn_sub").click(function () {
                var username = $("#username").val();
                var password = $("#password").val();
                var email = $("#email").val();
                var phone = $("#phone").val();
                var name = $("#name").val();
                var sex = $("#sex").val();

                //todo 数据验证

                var usernameExp = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
                if (!usernameExp.test(username)){
                    alert("账号只能字母开头，允许5-16位，允许字母数字下划线");
                    return;
                }

                var passwordExp = /^[a-zA-Z]\w{5,17}$/;
                if (!passwordExp.test(password)){
                    alert("密码只能字母开头，长度在6~18之间，只能包含字母、数字和下划线");
                    return;
                }

                var emailExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                if (!emailExp.test(email)){
                    alert("邮箱格式不正确");
                    return;
                }

                var phoneExp = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/
                if (!phoneExp.test(phone)){
                    alert("手机号格式不对");
                    return;
                }

                if (name == ""){
                    alert("姓名不能为空");
                    return;
                }


                //注册请求提交
                $.ajax({
                    url: "settings/qx/user/enroll",
                    data: {
                        username: username,
                        password: password,
                        email: email,
                        phone: phone,
                        name: name,
                        sex: sex
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "1") {
                            alert("注册成功");
                            //返回登录页面
                            window.location.href = "settings/qx/user/toLogin";
                        } else {
                            alert(data.message);
                        }
                    }

                })


            })


        })
    </script>

</head>
<body style="background-image: url('image/333.JPG');">
<div class="re_div">
    <div class="cLeft">
        <p id="p1">新用户注册</p>
        <p id="p2">USER REGISTER</p>
    </div>
    <div class="cCenter">
        <table>
            <tr>
                <td class="td_left"><label for="username">用户名</label></td>
                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
            </tr>

            <tr>
                <td class="td_left"><label for="password">密码</label></td>
                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
            </tr>

            <tr>
                <td class="td_left"><label for="email">Email</label></td>
                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
            </tr>

            <tr>
                <td class="td_left"><label for="name">姓名</label></td>
                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
            </tr>

            <tr>
                <td class="td_left"><label for="phone">手机号</label></td>
                <td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入手机号"></td>
            </tr>

            <tr>
                <td class="td_left"><label>性别</label></td>
                <td class="td_right" style="color: #2a2828">
                    <select id="sex">
                        <option th:each="dicValue:${dicValues}"
                                th:value="${dicValue.id}" th:text="${dicValue.value}"
                        >张三
                        </option>
                    </select>
                </td>
            </tr>

            <!--      <tr>-->
            <!--        <td class="td_left"><label for="birthday">出生日期</label></td>-->
            <!--        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>-->
            <!--      </tr>-->

            <!--      没找到验证码的图，暂时停用-->
            <tr>
                <td class="td_left"><label for="checkcode">验证码</label></td>
                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="调试中，请忽视"
                                            readonly>
                    <img id="cheImg" src="img/verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input id="btn_sub" type="button" value="注册"></td>
            </tr>
        </table>
    </div>
    <div class="cRight">
        <p id="p3">已有账号？<a href="settings/qx/user/toLogin">立即登录</a></p>
    </div>
</div>
</body>
</html>
